<template>
	<view id="problemList">
		<view class="pageHeader">
			<uni-search-bar class="search" @confirm="search" @input="search" @cancel="cancel" placeholder="请输入问题" />
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" top="130" bottom="0" @down="downCallback" @up="upCallback">
			<view class="noticeList" v-for="(item,index) in list" :key="index" @click='goDetails(item.id)'>
				<view class="content">{{item.title}}</view>
				<text class="icon"><i class="iconfont icon-right"></i></text>
			</view>
		</mescroll-uni>
	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				product_id:'',
				searcher:'',
				name:'',
				list:[]
			}
		},
		onLoad(option) {
			this.search=option.search
			this.name=option.name
			this.product_id=option.id
			uni.setNavigationBarTitle({
			    title: option.name
			})
		},
		
		methods: {
			search(e) {
				this.searcher=e
			},
			cancel(){
				this.searcher=''
			},
			upCallback(page) {
				this.httpClient.post('stock/app/problem/problemList', {
					pageNum:page.num,
					pageSize:page.size,
					product_id:this.product_id,
					title:this.search
				}).then(res => {
					this.mescroll.endByPage(res.data.data.length, res.data.total);
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(res.data.data);
				}).catch(() => {
					this.mescroll.endErr();
				})
			},
			goDetails(id){
				uni.navigateTo({
					url:'problemDetail?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	#problemList{
		.pageHeader{
			height:120rpx;
			background:#FFF;
			margin-bottom:10rpx;
		}
		.noticeList{
			padding: 15rpx 30rpx;
			width: 100%;
			box-sizing: border-box;
			background: #fff;
			margin-bottom: 1rpx;
			display:flex;
			.content{
				flex:1
			}
			.icon{
				width:30rpx;
				i{
					color:#CCC;
				}
			}
		}
	}
</style>
